<template>
  <div class="OrderBox">
    <div class="search" style="margin-top: 15px">
      <el-input
        placeholder="请输入内容"
        v-model="input3"
        class="input-with-select"
      >
        <el-button slot="append" icon="el-icon-search"></el-button>
      </el-input>
    </div>
    <el-table :data="tableData" border style="width: 100%" size="small   ">
      <el-table-column width="40" prop="order_id"> </el-table-column>
      <el-table-column width="650" prop="order_number" label="订单编号">
      </el-table-column>
      <el-table-column width="80" prop="order_price" label="订单价格">
      </el-table-column>
      <el-table-column width="80" prop="pay_status" label="是否付款">
      </el-table-column>
      <el-table-column width="80" prop="is_send" label="是否发货">
      </el-table-column>
      <el-table-column width="160" prop="update_time" label="下单时间">
      </el-table-column>
      <el-table-column label="操作">
        <el-button type="primary" size="small" @click="dialogVisible = true"
          >修改地址</el-button
        >
        <el-button type="success" size="small" @click="OnLogistics = true"
          >查看物流</el-button
        >
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage1"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
    <el-dialog
      title="修改地址"
      :visible.sync="dialogVisible"
      width="50%"
      :before-close="handleClose"
    >
      <div class="open">
        <el-form
          :label-position="labelPosition"
          label-width="80px"
          :model="formLabelAlign"
        >
          <div class="block">
            <span class="demonstration">地址</span>
            <!-- <el-cascader
              :options="options"
              :props="{ checkStrictly: true }"
              clearable
            ></el-cascader> -->
             <el-cascader
              size="large"
              :options="options"
              :props="{ checkStrictly: true }"
              v-model="selectedOptions"
              @change="Oncity">
            </el-cascader>
          </div>
          <el-form-item label="详细信息">
            <el-input v-model="formLabelAlign.region"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisible = false"
            >确 定</el-button
          >
        </span>
      </div>
    </el-dialog>
    <el-dialog
      title="物流详情"
      :visible.sync="OnLogistics"
      width="50%"
      :before-close="handleClose"
    >
      <el-timeline :reverse="reverse" >
        <el-timeline-item
          v-for="(activity, index) in datas"
          :key="index"
          :timestamp="activity.time"
        >
          {{ activity.context }}
        </el-timeline-item>
      </el-timeline>
    </el-dialog>
  </div>
</template>
  <script>
import { OrderList} from "@/api/user";
import { mapState } from "vuex";
import { regionData } from 'element-china-area-data'
export default {
  name: "OrderList",
  data() {
    return {
      input3: "",
      tableData: [],
      currentPage1: 1,
      pagesize: 10,
      total: 0,
      labelPosition: "right",
      dialogVisible: false,
      OnLogistics:false,
      formLabelAlign: {
        name: "",
        region: "",
        type: "",
      },

      reverse: false,
      options: regionData,
      selectedOptions: []
    };
  },
  computed: {
    ...mapState("OrderList", [ "datas"]),
  },
  methods: {
    Oncity (value) {
        console.log(value)
      },
    init(tag = 1, size = 10) {
    
      OrderList(tag, size).then((res) => {
        let val = res.data.data.goods;
        this.total = res.data.data.total;
        this.$store.commit("OrderList/Orders", val);
        // console.log(res.data.data);
        this.tableData = this.$store.state.OrderList.val;
        this.tableData.forEach((item) => {
          if (item.pay_status == 0) {
            item.pay_status = "已支付";
          } else {
            item.pay_status = "未支付";
          }
        });
      });
      
    },
    handleSizeChange(size) {
      this.pagesize = size;
      this.init(this.currentPage1, size);
      //  this.tableData = this.$store.state.OrderList.val;
    },
    handleCurrentChange(tags) {
      this.currentPage1 = tags;
      this.init(tags, this.pagesize);
      // this.tableData = this.$store.state.OrderList.val;
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
  },
  created() {
    this.init();
  },
};
</script>
  
<style lang="scss" scoped>
.OrderBox {
  width: calc(100vw - 280px);
  margin-top: 20px;
  padding: 10px;
  background: rgb(255, 255, 255);
  box-shadow: rgb(186, 185, 185) 0px 0px 5px 0px;
  border-radius: 5px;
  .search {
    width: 480px;
  }
  .el-table {
    margin-top: 10px;
    height: 80%;
  }
  .el-pagination {
    margin-top: 20px;
  }
  // .open{
  //   width: 600px;
  //   height: 240px;
  //   position: fixed;
  //   padding:40px;
  //   top: 20%;
  //   background: rgb(223, 153, 153);
  //   left: 50%;
  //   transform: translateX(-300px);
  // }
}
</style>